<template>
  <div class="expert-detail-mobel">
    <Header></Header>
    <div class="avator">
      <img :src="expertInfo.picture" alt="" />
      <h3>{{ expertInfo.name }}</h3>
      <p v-for="(item, index) in expertInfo.profession" :key="index">{{ item }}</p>
    </div>

    <!-- 标题 -->
    <div class="expert-intro-title">
      <span class="point"></span>
      <span>学历学位</span>
    </div>
    <!-- 教育信息 -->
    <div class="expert-detail-intro">
      <p v-for="(item, index) in expertInfo.assumeOffice" :key="index"> {{ item }} </p>
    </div>

    <!-- 标题 -->
    <div class="expert-intro-title">
      <span class="point"></span>
      <span>专家领域</span>
    </div>
    <div class="expert-detail-intro">
      <p v-for="(item, index) in expertInfo.areas" :key="index">{{ item }}</p>
    </div>

    <div class="expert-intro-title">
      <span class="point"></span>
      <span>曾服务企业</span>
    </div>
    <div class="expert-detail-intro">
      <p v-for="(item, index) in expertInfo.assumeOffice" :key="index">{{ item }}</p>
    </div>

    <div class="expert-intro-title">
      <span class="point"></span>
      <span>个人简历</span>
    </div>
    <div class="expert-detail-self-intro">
      <p>
        {{ expertInfo.program }}  
      </p>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import { ReqOneExpert } from '../../request/index'
import tools from "../../utils/tools";
export default {
  data() {
    return {
      expertInfo:{}
    };
  },
  components: {
    Header,
  },
  async created() {
    await this.getExpertById()
    this.initData()
  },
  methods: {
    async getExpertById() {
      let query = this.$router.history.current.query
      console.log(query)
      let resInfo = await ReqOneExpert(query)
      this.expertInfo = resInfo.expert
    },
    // 初始化数据
    initData() {
      this.expertInfo.areas = tools.strToArray(this.expertInfo.areas)
      this.expertInfo.assumeOffice = tools.strToArray(this.expertInfo.assumeOffice)
      this.expertInfo.profession = tools.strToArray(this.expertInfo.profession)
    }
  },
};
</script>

<style scoped>
.expert-detail-mobel .avator {
  height: 200px;
  background-color: #018cbf;
  overflow: hidden;
  text-align: center;
}
.expert-detail-mobel .avator img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
  margin: 20px auto;
}

.expert-detail-mobel .avator h3 {
  font-size: 20px;
  font-weight: 600;
}
.expert-detail-mobel .avator p {
  font-size: 14px;
  margin-top: 15px;
}
.expert-intro-title {
  height: 30px;
  border-bottom: 1px solid #aaa;
  border-top: 1px solid #aaa;
  display: flex;
}
.expert-intro-title :nth-child(1) {
  width: 15px;
  height: 15px;
  background: #018cbf;
  border-radius: 50%;
  margin: 7px 10px 7px 10px;
}
.expert-intro-title :nth-child(2) {
  color: #018cbf;
  line-height: 30px;
  font-weight: 600;
}
.expert-detail-intro {
  padding-left: 40px;
}
.expert-detail-intro p {
  line-height: 30px;
  font-weight: 500;
}
.expert-detail-self-intro {
  padding: 10px 30px;
  line-height: 20px;
  font-size: 14px;
}
.expert-detail-self-intro p {
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  img {
    padding-left: 0px;
  }
}
</style>
